<template>
  <div id="components-slider-demo-mark">  
    <a-slider  style="    margin: 0px;" :max="24" :marks="marks" :step="null" v-model:value="value5" />

  <!-- 引入 -->
    <!-- <EditorSlider style="width:90%"  @my-emit="parentEmit" ></EditorSlider>  -->
  </div>
</template>
<script>
import { h ,watch, ref} from 'vue';
export default {
name: 'editorSlider',
  data() {
    return {  
      marks: {
        0: '0',
        2: '2',
        4: '4',
        6: '6',
        8: '8',
        10: '10',
        12: '12',
        14: '14',
        16: '16',
        18: '18',
        20: '20',  
        22: '22',  
        24: {
          style: {
            color: '#f50',
          },
          label: h('strong', '隐藏'),
        },
      },
    };
  },
   
   setup(props,{emit}){ 
      let value5= ref(12) 
       watch(value5, () => {
        emit('my-emit',value5.value) 
    })
         
     return {
       value5, 
     }
   }
 
};
</script>
<style scoped>
#components-slider-demo-mark  { 
  width: 90%;
    height: 31px;
    /* overflow: hidden; */
}

</style>